*{
    margin: 0;
    padding: 0;
}
.box{
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}
.box>div{
    text-align: center;
}
.box>div:nth-child(1){
    /*grid-column-start: 1;
    grid-column-end:4;*/
    grid-column: 1/3;
}
.box>div:nth-child(3){
    grid-row: 2/4;
}
.box>div:nth-child(4){
    grid-column: 2/4;
}
.container{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
    /*grid-template-areas:
            "h h h h h h h h h h h h"
            "m m c c c c c c c c c c"
            "f f f f f f f f f f f f";*/
    /*grid-template-areas:
            'h h h h h h h h h h h h'
            'c c c c c c c c c c m m'
            'f f f f f f f f f f f f';*/
    grid-template-areas:
            '. h h h h h h h h h h .'
            'c c c c c c c c c c m m'
            '. f f f f f f f f f f .';
}
@media screen and (max-width: 640px) {
    .container{
        grid-template-areas:
                'm m m m m m h h h h h h'
                'c c c c c c c c c c c c'
                'f f f f f f f f f f f f';
    }
}
.header {
    grid-area: h;
}
.menu {
    grid-area: m;
}
.content {
    grid-area: c;
}
.footer {
    grid-area: f;
}